<template>
  <a-tabs
    class="tabs"
    v-model:activeKey="store.userApp.tabsActiveKey"
    hide-add
    type="editable-card"
    @edit="onEdit"
    @change="tabChange"
    :addable="false"
  >
    <a-tab-pane
      v-for="pane in store.userApp.tabs"
      :key="pane.path"
      :tab="pane.name"
      :closable="pane.closable"
    />
  </a-tabs>
</template>

<script lang="ts" setup>
import store from '@/store'
import { useRouter } from 'vue-router'
const router = useRouter()

const tabChange = (key) => {
  const item = store.userApp.tabs.find((v) => v.path === key)
  router.push({
    path: item.path,
    query: item.query
  })
}

const onEdit = (key) => {
  const item = store.userApp.tabs.find((v) => v.path === key)

  store.userApp.tabsDel(item)
}
</script>

<style lang="less" scoped>
.tabs {
  user-select: none;
}
</style>
